<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .input{position: relative;width:140px;height:40px;border: solid 1px black;}
    .input input{width: 132px;height: 40px;border: none;padding: 0 4px;background: transparent}
    .input span{position: absolute;left:4px;top:0;line-height: 40px;color: #777;z-index: -1;}

    .toast{width:400px;border: solid 1px #ccc;position: fixed;left:0;right:0;margin:0 auto;top:100px;background: #fff;display: flex;flex-direction: column;justify-content: space-around;padding: 10px;display: none;}
    .toast h4{margin: 0;}
    .toast .txt{margin: 10px 0;}
    .toast .btns{width: 100px;align-self: flex-end;}
  </style>
</head>
<body>
  <input type="text" placeholder="默认提示">

  <div class="input">
    <input type="text">
    <span>默认提示</span>
  </div>

  <div class="alert toast">
    <h4>此网页提示了一个信息：</h4>
    <div class="txt"></div>
    <div class="btns">
      <input type="button" value="确定" class="cancel">
    </div>
  </div>

  <div class="confirm toast">
    <h4>此网页提示了一个信息：</h4>
    <div class="txt"></div>
    <div class="btns">
      <input type="button" value="确定" class="OK">
      <input type="button" value="取消" class="cancel">
    </div>
  </div>
</body>
<script>

  var ipt = document.querySelector(".input input")
  var span = document.querySelector(".input span")

  // 输入行为发生时：根据输入框是否为空，决定提示信息是否显示

  ipt.oninput = function(){
    if(ipt.value === ""){
      span.style.display = "block";
    }else{
      span.style.display = "none";
    }
  }

  // 5. 使用html+css+js，模拟alert弹出框功能
  // alert("这是alert要弹出的信息");

  function alert(txt){
    var alertBox = document.querySelector(".alert");
    var alertTxt = document.querySelector(".alert .txt");
    var alertCancel = document.querySelector(".alert .cancel");
    alertTxt.innerText = txt;

    alertBox.style.display = "flex";
    alertCancel.onclick = function(){
      alertBox.style.display = "none";
    }
  }



  // 6. 使用html+css+js，模拟confirm弹出框功能
  // confirm("这是confirm要弹出的信息");

  function confirm(txt){
    var confirmBox = document.querySelector(".confirm");
    var confirmTxt = document.querySelector(".confirm .txt");
    var confirmOK = document.querySelector(".confirm .OK");
    var confirmCancel = document.querySelector(".confirm .cancel");
    var state = null;
    confirmTxt.innerText = txt;
    confirmBox.style.display = "flex";
    confirmCancel.onclick = function(){
      confirmBox.style.display = "none";
      state = false;
    }
    confirmOK.onclick = function(){
      confirmBox.style.display = "none";
      state = true;
    }
  }


  // 7. 使用html+css+js，模拟prompt弹出框功能


</script>
</html>